import {Box, useTheme} from "@mui/material";
import DGDialogLayout from "../../../components/DGDialogLayout/DGDialogLayout.tsx";
import DGTextView from "../../../components/DGTextView.tsx";
import DGDrawerLayout from "../../../components/DGDrawerLayout/DGDrawerLayout.tsx";
import {FC} from "react";
import {useNavigate} from "react-router-dom";
import {ArrowRight} from "@mui/icons-material";
import DGListViewItem from "../../../components/DGListViewItem.tsx";
import DGListView from "../../../components/DGListView.tsx";

interface DGLoginMoreProps {
    state: boolean,
    switchView: (text: string) => void
}

const DGLoginMore: FC<DGLoginMoreProps> = ({state, switchView}) => {
    // 查询主题
    const m = useTheme().palette.mode === "light";
    // 路由跳转
    const router = useNavigate();
    // 关闭控制
    const handleClose = () => {
        // 关闭
        switchView("");
        // 后退
        router(-1);
    }

    // DOM 节点
    const Content = (<Box>
        {/* 提示语 */}
        <DGTextView Body Bold>请选择您要进行的操作！</DGTextView>
        <DGListView style={{display: "flex", flexDirection: "column", gap: "10px"}} NoBackground>
            {/*/!* QQ 登陆 *!/*/}
            {/*<DGListViewItem*/}
            {/*    style={{backgroundColor: m ? "#EDEDED" : "#EDEDED11"}}*/}
            {/*    title="QQ 登录" subText="暂未开发" rIcon={<ArrowRight/>}*/}
            {/*/>*/}
            {/*/!* 微信登陆 *!/*/}
            {/*<DGListViewItem*/}
            {/*    style={{backgroundColor: m ? "#EDEDED" : "#EDEDED11"}}*/}
            {/*    title="微信登录" subText="暂未开发" rIcon={<ArrowRight/>}*/}
            {/*/>*/}
            {/* 注册账户 */}
            <DGListViewItem
                style={{backgroundColor: m ? "#EDEDED" : "#EDEDED11"}}
                title="注册账户" subText="注册逐梦园账户，一起追梦游天下！" rIcon={<ArrowRight/>}
                onClick={() => switchView("reg_index")}
            />
            {/* 忘记密码 */}
            <DGListViewItem
                style={{backgroundColor: m ? "#EDEDED" : "#EDEDED11"}}
                title="找回密码" subText="找回你忘掉的账户密码！" rIcon={<ArrowRight/>}
                onClick={() => switchView("forget_index")}
            />
        </DGListView>
    </Box>);
    // 返回组件节点
    return (<Box>
        {/* DGDialogLayout 样式 */}
        <DGDialogLayout
            back={{name: "返回", click: () => switchView("login_index")}}
            title="登陆选项" state={state} close={() => handleClose()} PANEL AUTO>
            {Content}
        </DGDialogLayout>
        {/*DGDrawerLayout 样式 */}
        <DGDrawerLayout
            more={{name: "返回", click: () => switchView("login_index")}}
            title="登陆选项" state={state} close={() => handleClose()} flex="bottom" PANEL AUTO>
            {Content}
        </DGDrawerLayout>
    </Box>);
}
export default DGLoginMore;